import React from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "antd";
import qs from "qs";

const B = (props) => {
  console.log("props", props);
  const navigate = useNavigate();
  const handle = () => {
    // 问号传参
    // navigate({
    //   pathname: "/c",
    //   search: qs.stringify({
    //     id: 100,
    //     name: "zhufeng",
    //   }),
    // });

    // 路径传参
    // navigate(`/c/100/luochen`);

    // 隐式传参
    navigate("/c", {
      replace: true,
      // 隐式传参信息
      state: {
        id: 100,
        name: "luochen",
      },
    });
  };

  return (
    <div>
      组件B的内容
      <Button type="primary" onClick={handle}>
        按钮
      </Button>
    </div>
  );
};

export default B;

/**
 在react-router-dom v6中，即便是当前组件是基于<Route>匹配渲染，也不会基于属性，把history  /location/match传递给组件！！想获取
 相关信息，只有基于Hook函数处理 !!
      + 首先要确保，需要使用路由Hook组件，是在Router 【HashRouter或BrowserRouter】内部包着的，否则使用会报错
      + 只要是Router--hash或browser内部包裹的组件，不论是否是基于<Route>匹配渲染的
        + 默认都不可能再基于props获取相关的对象信息了
        + 只能基于"路由Hook"去获取！！
  为了在类组件中也可以获取路由的相关信息：
  1、 稍后我们构建路由表的时候，会想办法：继续让基于<Route>匹配渲染的组件，可以基于属性获取需要的信息
  2、 不是基于<Route>匹配渲染的组件，我们需要自己重写withRouter【V6中干掉了这个API】,让其和基于<Route>匹配渲染的组件，
  具备相同的属性！！
 */
